<template>
  <div class="wxkfAccessConfig">
    <affix :label="$t('configLazyLoad.channel.WXkfAccess006')"></affix>
    <div class="content paddingLeft">
      <div class="code_text">
        <code class="wxkfUrl">{{data.kfUrl}}</code>
        <span class="copy" @click="copyText('wxkfUrl')"><span class="iconfont icon-fuzhi"></span>{{$t('configLazyLoad.channel.copyToClip')}}</span>
      </div>
    </div>
    <affix :label="$t('configLazyLoad.channel.geneCode')"></affix>
    <div class="content" v-if="data.kfUrl">
      <div class="qrcode_box">
        <qrcode-image
        ref="qrcode"
        class="qrcode-image"
        :optionSize="140"
        :logoShow='false'
        :allAccessUrl="data.kfUrl"/>
        <div class="qrcode_title">
          <div class="qrcode_title_tip">{{$t('configLazyLoad.channel.WXkfAccess007')}}</div>
          <el-button type="text" @click.stop="download" class="">
            {{$t('public.download')}}
          </el-button>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <affix :label="$t('configLazyLoad.channel.WXkfAccess008')"></affix>
        <div class="access_guide content">
          <div class="access_guide_tip">{{$t('configLazyLoad.channel.WXkfAccess009')}}</div>
          <div class="guide_box" v-for="(item, index) in guideArr" :key="index">
            <a :href="item.href" target="_blank"><span class="iconfont" :class="item.icon"></span>{{item.name}}</a>
            <span class="iconfont icon-youjiantou"></span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <affix :label="$t('configLazyLoad.channel.WXkfAccess010')"></affix>
        <div class="access_guide_out content">
          <div class="access_guide_tip">{{$t('configLazyLoad.channel.WXkfAccess011')}}</div>
          <div class="guide_box_two" v-for="(item, index) in guideTwoArr" :key="index">
            <p :class="item.tip ? 'guide_box_two_tip' : 'guide_box_two_a' ">
              <span v-if="item.icon" class="iconfont" :class="item.icon"></span>{{item.name}}<br>
              <span>{{item.tip}}</span>
            </p>
            <a :href="item.href" target="_blank" v-show="item.href">{{$t('configLazyLoad.channel.WXkfAccess023')}}</a>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix'
  import QrcodeImage from '../webCustomerService/webOnlineServer/QrcodeImage.vue'
  import Clipboard from 'clipboard-js'
  export default {
    name: 'wxkfAccessConfig',
    data () {
      return {
        guideArr: [
          {
            name: this.$t('configLazyLoad.channel.WXkfAccess012'),
            href: 'https://work.weixin.qq.com/nl/act/p/edc32c5d924d4e64',
            icon: 'icon-ICON_wangyejieru'
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess013'),
            href: 'https://work.weixin.qq.com/nl/act/p/ed10da3cdd1646aa',
            icon: 'icon-ICON_gongzhonghaocaidan'
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess014'),
            href: 'https://open.work.weixin.qq.com/kf/doc#31443',
            icon: 'icon-ICON-xiaochengxu'
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess015'),
            href: 'https://work.weixin.qq.com/nl/act/p/6b82bfd4b8ae4ef9',
            icon: 'icon-ICON_souyisou'
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess016'),
            href: 'https://work.weixin.qq.com/nl/act/p/d80730967c984182',
            icon: 'icon-ICON_weixinzhifu'
          }
        ],
        guideTwoArr: [
          {
            name: this.$t('configLazyLoad.channel.WXkfAccess017'),
            href: 'https://work.weixin.qq.com/nl/act/p/a419a07e93a84715',
            icon: 'icon-ICON_APP'
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess018'),
            href: '',
            tip: this.$t('configLazyLoad.channel.WXkfAccess019')
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess020'),
            href: '',
            tip: this.$t('configLazyLoad.channel.WXkfAccess021')
          },{
            name: this.$t('configLazyLoad.channel.WXkfAccess022'),
            href: 'https://work.weixin.qq.com/nl/act/p/1da53a86f7b34010',
            icon: 'icon-ICON_wangyejieru'
          },
        ]
      }
    },
    props: {
      data: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      copyText (name) {
        let self = this
        Clipboard.copy(document.getElementsByClassName(name)[0].innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      download (url) {
        var canvas = document.getElementsByTagName('canvas')[0]
        var oA = document.createElement("a");
        oA.download = 'WeChat official customer service access QR code.png';
        oA.href = canvas.toDataURL("image/png");
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
      }
    },
    components: {
      QrcodeImage,
      affix
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .content
    padding-left 16px
  .wxkfAccessConfig
    text-align left
    .ui-affix
      margin-top 34px
      padding-bottom 0
    .code_text
      position relative
      background $c-back
      padding 16px
      code
        word-break break-all
        display inline-block
        max-width calc(100% - 160px)
      .copy
        position absolute
        right 16px
        top 16px
        cursor pointer
        .iconfont
          color $c-main
          font-size 12px
    .qrcode_box
      background $c-back
      .qrcode-image
        margin 10px
        display inline-block
      .qrcode_title
        display: inline-block;
        vertical-align: top;
        margin-top: 56px;
        .el-button
          font-size 12px
    .guide_box
      border-top 1px solid $c-border2
      height 42px
      position relative
      .icon-youjiantou
        position absolute
        font-size 12px
        color $c-border2
        top 14px
        right 8px
      a
        color: #000
        height 100%
        width 100%
        line-height 42px
        display inline-block
    .guide_box_two
      border-top 1px solid $c-border2
      position relative
      min-height 42px
      a
        position absolute
        font-size 12px
        top 14px
        right 8px
      .guide_box_two_tip
        line-height 20px
        span
          color #999
      .guide_box_two_a
        line-height 42px
    .access_guide_tip
      margin-bottom 10px
    .iconfont
      font-size 12px
      margin-right 4px
</style>